import React from 'react';
import PropTypes from 'prop-types';
import { ResponsiveContainer } from 'recharts';
import styles from './Container.less';

const Container = ({ children, ratio = 5 / 2, minHeight = 250, maxHeight = 350 }) => (
    <div className={styles.container} style={{ minHeight, maxHeight }}>
        <div style={{ marginTop: `${100 / ratio}%` || '100%' }} />
        <div className={styles.content} style={{ minHeight, maxHeight }}>
            <ResponsiveContainer>{children}</ResponsiveContainer>
        </div>
    </div>
);

Container.propTypes = {
    children: PropTypes.element.isRequired,
    ratio: PropTypes.number,
    minHeight: PropTypes.number,
    maxHeight: PropTypes.number,
};

export default Container;
